<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>动态更新窗口尺寸信息</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        text-align: center;
        margin: 0;
        padding: 50px;
      }

      #sizeInfo {
        font-size: 24px;
        margin-top: 20px;
      }
    </style>
  </head>
  <body>
    <h1>Resize Event Example</h1>
    <p>Try resizing the browser window.</p>
    <div id="sizeInfo"></div>
    <script>
      const sizeInfo = document.getElementById("sizeInfo");
      function updataSizeInfo() {
        const width = window.innerWidth; //视口的宽度
        const height = window.innerHeight; //视口的高度
        console.log(width, height);
        sizeInfo.textContent = `window Size :${width} x ${height}`;
      }
      window.addEventListener("resize", updataSizeInfo);
      //该示例实时显示浏览器窗口的尺寸，当用户调整窗口大小时，页面上的尺寸信息会自动更新。
    </script>
  </body>
</html>
